<template>
  <div class="all">
  <div class="add-nav">
     <el-select v-model="condition.position" placeholder="请选择" clearable>
        <el-option label="1号位" :value="1"></el-option>
        <el-option label="2号位" :value="2"></el-option>
        <el-option label="3号位" :value="3"></el-option>
      </el-select>
    </div>
    <el-table :data="list">
      <el-table-column align="center" type="index"></el-table-column>
      <el-table-column align="center" prop="roomId" label="房间号"></el-table-column>
         <el-table-column align="center" prop="roomName" label="房间名"></el-table-column>
      <el-table-column align="center" label="推荐位">
        <template slot-scope="scope">
          {{scope.row.position}}号位
        </template>
      </el-table-column>
      <el-table-column align="center" label="头像">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 100px" fit="fit" :src="scope.row.imgUrl"></el-image>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="nickName" label="用户名"></el-table-column>
      <el-table-column align="center" prop="userId" label="用户ID"></el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="Rmsgshow(scope.row)">修改</el-button>
          <el-button type="danger" size="small" @click="DelRecommend(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="Page">
          <el-pagination
          background
          hide-on-single-page
            @current-change="handleCurrentChange"
            :current-page="condition.pageNum"
            :page-size="condition.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="condition.quantity">
          </el-pagination>

    </div>
	<el-dialog width="20%" title="修改推荐位" :visible.sync="show">
		<el-radio-group v-model="mod.position">
		        <el-radio-button :label="1">1号位</el-radio-button>
		        <el-radio-button :label="2">2号位</el-radio-button>
		        <el-radio-button :label="3">3号位</el-radio-button>
		  </el-radio-group>
		  <div style="text-align: center;margin-top: 15px;">
		  <el-button type="primary" @click="ModRecommend">确定</el-button>
		  </div>
	</el-dialog>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
  import {RecommendList,RecommendDel,RecommendMod} from '@/utils/API'
  export default{
      inject:["reload"],
    data(){
      return{
        list:[],
        condition:{
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token'),
          pageNum:1,
          pageSize:10,
          position:'',
          total:''
        },
        mod:{
          position:'',
          id:''
        },
        show:false
      }
    },
    methods:{
      //获取数据
      postList(){
        RecommendList(this.condition).then(res=>{
          this.list=res.data.list
          this.condition.total=res.data.total
        })
      },
     //删除推荐位
      DelRecommend(e){
        this.$confirm('删除'+e.nickName+'推荐位设置','系统提示',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
        }).then(()=>{
          const data={
            adminName:Cookies.get('adminName'),
            token:Cookies.get('token'),
            id:e.id
          }
          RecommendDel(data).then(res=>{
            if(res.code==0){
              this.$message.success('操作成功')
              this.reload()
            }
          })
        }).catch(()=>{})
      },
      //修改推荐位
      ModRecommend(){
        const data={
          adminName:Cookies.get('adminName'),
          token:Cookies.get('token'),
          id:this.mod.id,
          position:this.mod.position
        }
        RecommendMod(data).then(res=>{
          if(res.code==0){
            this.$message.success('操作成功')
            this.reload()
          }
        })
      },
      //操作窗口
      Rmsgshow(e){
        this.mod.position=e.position
        this.mod.id=e.id
        this.show=true
       },
       //翻页
       handleCurrentChange(val){
         this.condition.pageNum=val
         this.postList()
       }
    },
    mounted() {
      this.postList()
    },
    watch:{
      'condition.position':{
        handler(val, oldVal){
                    this.condition.pageNum=1
                    this.postList()
                  },
      }
    }
  }
</script>

<style lang="scss" scoped>
  .all{padding: 5px 5px;}
.el-radio-group{width: 90%;
    margin: auto;
    display: block;}
.el-radio-button{
  margin: 3%;
  border-left: 1px solid #dcdfe6
}
</style>
